<template>
    <div class="container">
        <el-container>
            <el-aside style="width: 50%;  background-color:#fff;">
                <img src="../../assets/images/3.png" alt="">
            </el-aside>
            <el-main>
                <p>企业数字化管理平台</p>
                <span>Welcome欢迎登录</span>
                 <el-form ref="loginForm" :model="loginForm" :rules="loginRules" >
                   <ul>
                    <li>
                        <el-form-item prop="account">
                        <img src="../../assets/images/1.png" alt="">
                        <input type="text" name="account" v-model="loginForm.account"   ref="account" tabindex="1" :placeholder="$t('login.username')">
                        </el-form-item>
                    </li>
                    <li> 
                        <el-form-item prop="password">
                        <img src="../../assets/images/2.png" alt="">
                        <input type="password" name="password"  v-model="loginForm.password"  ref="password" tabindex="2" :placeholder="$t('login.password')">
                        </el-form-item>
                    </li>
                    <li class="bottom">
                        <el-button :loading="loading" type="primary" round  @click.native.prevent="handleLogin" >{{ $t('login.logIn') }}</el-button>
                    </li>
                  </ul>
                </el-form>
            </el-main>
        </el-container>
    </div>
</template>
<script>
export default {
  name: 'Login',
  data:function() {
    return {
      loginForm: {
        account: '',
        password: ''
      },
      loginRules: {
        account: [
          { required: true, trigger: 'blur', message: this.$t('login.accountTip') }
        ],
        password: [
          { required: true, trigger: 'blur', message: this.$t('login.passwordTip') }
        ]
      },
      capsTooltip: false,
      loading: false,
      showDialog: false,
      redirect: undefined,
      otherQuery: {}
      }
  },
   computed: {
    loginLoading() {
      return this.$store.state.user.loginLoading
    }
  },
  watch: {
    loginLoading(val) {
      if (!val) this.loading = false
    },
    $route: {
      handler: function (route) {
        const query = route.query
        if (query) {
          this.redirect = query.redirect
         // this.otherQuery = this.getOtherQuery(query)
        }
      },
      immediate: true
    }
  },
  created() {
    const _this = this
    document.onkeydown = function (e) {
      const { keyCode } = e
      if (keyCode === 13) {
        _this.handleLogin()
      }
    }
  },
  mounted() {
    
         if (this.loginForm.account == '') {
            this.$refs.account.focus()
           } else if (this.loginForm.password == '') {
            this.$refs.password.focus()
          }
      this.$store.commit('user/SET_LOGIN_LOADING', false)
  },
  destroyed() {
    document.onkeydown = function (e) {
      const { keyCode } = e
      if (keyCode === 13) { }
    }
  },
  methods:{
     checkCapslock(e) {
      const { key } = e
      this.capsTooltip = key && key.length === 1 && key >= 'A' && key <= 'Z'
    },
    handleLogin() {
         if (this.loading) return
         this.$refs.loginForm.validate(valid => {
           if (valid) {
             this.loading = true
             this.$store.commit('user/SET_LOGIN_LOADING', true)
             this.$store.dispatch('user/login', this.loginForm).then(() => {
                  this.$router.push({
                  path: this.redirect || '/home',
                  query: this.otherQuery
                })
              })
               .catch(() => {
                  this.$store.commit('user/SET_LOGIN_LOADING', false)
              })
          } else {
          
            return false
          }
        })
      },
    },
    getOtherQuery(query) {
      return Object.keys(query).reduce((acc, cur) => {
        if (cur !== 'redirect') {
          acc[cur] = query[cur]
        }
        return acc
      }, {})
    }
  }
</script>
<style lang="scss" scoped>

   *{
        margin:0;
        padding:0;
        list-style: none;
        box-sizing: border-box;
    }
    html,body{
        width: 100%;
        height: 100%;
    }
        .container{
            width: 100%;
            height: 100%;
            background-image: url(../../assets/images/4.jpg);
            background-size: 100% 100%;
            padding-top: 10%;
            box-sizing: border-box;
        }

    .container>.el-container{
        width: 50%;
        max-width: 900px;
        min-width: 600px;
        margin:0 auto;
        background-color:#fff;
        border-radius: 20px;
        padding:50px 0;
    }
    .el-aside{
        text-align: center;
        padding:40px;

    }
    .el-main{
      padding-right: 80px;
    }
    .el-aside img{
        width: 100%;
    }
    .el-main p{
        font-size: 25px;
        margin-bottom: 10px;
        margin-top: 40px;
    }
    .el-main>span{
        color: #bfbfbf;
        font-size: 20px;
    }
    .el-main ul{
        margin-top:70px;
    }
    .el-main ul li{
        border-bottom: 1px solid #eeeeee;
        padding-bottom: 10px;
        margin:20px 0
    }
    .el-main ul .bottom{
        border-bottom: none;
        margin-top: 60px;
    }
    .el-main ul li img{
        width: 25px;
        vertical-align: middle;
    }
    .el-main ul li input{
        width: 80%;
        border:none;
        outline: none;
        padding-left: 10px;
        font-size: 16px;;
    }
    .el-main ul li button{
        width:90%;
        color: #fff;
        display: block;
        margin:20px auto;
        font-size: 20px;
    }
</style>
